<template>
    <div id="k_box">

    </div>
</template>
<script setup lang='ts'>
import * as echarts from 'echarts';
import { onMounted } from 'vue'
// 接收父组件传递的参数
const props = defineProps<{
    kdata: { val: Array<Array<number>>, x: string[] }
}>()

// console.log('props', props);
// console.log(props.kdata.x, props.kdata.val); // undefined , undefined

onMounted(() => {
    var k_box = document.getElementById('k_box');
    var myChart = echarts.init(k_box);
    // 控制图标的缩放
    window.addEventListener('resize', function () {
        myChart.resize();
    });
    let option = {
        title: {
            text: '公司股票行情'
        },
        xAxis: {
            data: props.kdata.x
        },
        yAxis: {},
        series: [
            {
                type: 'candlestick',
                data: props.kdata.val
            }
        ]
    };

    myChart.setOption(option);
})

</script>
<style scoped>
#k_box {
    width: 50%;
    height: 500px;
}
</style>